<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="/static/css/builders.css"/>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=XycG9tfUbHvFX4cEpDIGAeTouWY4714O"></script>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<!-- <script type="text/javascript" src="/static/css/builders.js"></script> -->
	</head>
	<body>
		<div class="head">
			<p>基础信息<span onclick="reset({$advData.device_id})"><img src="/static/img/reset.png" alt="" id="reseticon"></span></p>
		</div>
		<div class="content">
			<div class="contentitem">
				<table>
				<tr><td>设备ID</td><td><span>{$advData.device_id}</span></td></tr>
				<tr><td>广告牌名称</td><td><span>{$advData.name}</span></td></tr>
				<tr><td>设备类型</td><td><span>{$advData.device_type}</span></td></tr>
				<tr><td>供网方式</td><td><span>{$advData.network}</span></td></tr>
				<tr><td>wifi共享方式</td><td><span>{$advData.wifi}</span></td></tr>
				<tr><td>广告位类型</td><td><span>{$advData.type}</span></td></tr>
				<tr><td>广告位通电情况</td><td><span>{$advData.power_state}</span></td></tr>
				<tr><td>外壳类型</td><td><span>{$advData.shell_type}</span></td></tr>
				</table>
			</div>
			<div class="contentitem">
				<table>
					<tr>
						<td>mac地址</td>
						<td>采集时间</td>
					</tr>
					<!--<span onclick="macreset('mac')"><img src="/static/img/reset.png" alt="" id="macreset"></span>-->
					<tr id="macnone" style="display: none;"><td>暂无数据</td></tr>
					
					<div id="macshow">
					<tr >
						<td class="mac"></td>
						<td class="mactime"></td>
					</tr>
					<tr >
						<td class="mac"></td>
						<td class="mactime"></td>
					</tr>
					<tr >
						<td class="mac"></td>
						<td class="mactime"></td>
					</tr>
					<tr >
						<td class="mac"></td>
						<td class="mactime"></td>
					</tr>
					<tr >
						<td class="mac"></td>
						<td class="mactime"></td>
					</tr>
					<tr >
						<td class="mac"></td>
						<td class="mactime"></td>
					</tr>
					</div>
				</table>
			</div> 
			<div class="contentitem">
				<table>
					<tr>
						<td>温度</td>
						<td>采集时间</td>
					</tr>
					<!--<span onclick="macreset('temp')"><img src="/static/img/reset.png" alt="" id="tempreset"></span>-->
					<tr id="tempnone" style="display: none;"><td>暂无数据</td></tr>
					<div id="tempshow">
					<tr >
						<td class="temp"></td>
						<td class="temptime"></td>
					</tr>
					<tr >
						<td class="temp"></td>
						<td class="temptime"></td>
					</tr>
					<tr >
						<td class="temp"></td>
						<td class="temptime"></td>
					</tr>
					<tr >
						<td class="temp"></td>
						<td class="temptime"></td>
					</tr>
					
					<tr >
						<td class="temp"></td>
						<td class="temptime"></td>
					</tr>
					<tr >
						<td class="temp"></td>
						<td class="temptime"></td>
					</tr>
					</div>
				</table>
			</div> 
			<div class="contentpic" onclick="change()">
				<div id="imgnone" style="display: none;">暂无数据</div>
				<div id="imgshow">
				{volist name="ossList" id="vo" key="k" empty="<div >暂无数据</div>"}
				<div id="img">
					<span class="imgtime"></span>
					<img src="{$vo.img_url}" alt=""  id="img{$k}" class="img"/> <img src="/static/img/true.png" alt=""  class="imgtrue"  name="{$vo.oss_id}"/>
				</div>
				{/volist}
				</div>
				<div id="progress">
					<progress value="0" max="100"></progress> <span class="progressvalue">0</span>
				</div>
				<div class="button">
					<div id="setpicture"><p><span onclick="push()" id="setpicture">设置为基准图片</span></p></div>
					<div  id="getpicture"><p><span onclick="getpicture({$advData.device_id})" id="getpicture">捉拍图片</span></p></div>
				</div>
			</div>
			<input type="hidden" id="advId" value="{$advData.id}">
			<input type="hidden" id="post_url" value="{:url('builder/set_img_info')}">
			<div class="map">
				<div id="allmap"></div>
				<p><span>经度:</span><span id="lng"></span></p>
				<p><span>纬度:</span><span id="lat"></span></p>
				<p><span onclick="savepos()">保存</span></p>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			reset({$advData.device_id})
			getpicture({$advData.device_id})
		}
		var map = new BMap.Map("allmap");    // 创建Map实例
		map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
		map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
		map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
		map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
		var geolocation = new BMap.Geolocation();
		geolocation.getCurrentPosition(function(r){
			if(this.getStatus() == BMAP_STATUS_SUCCESS){
				var mk = new BMap.Marker(r.point);
				map.addOverlay(mk);
				map.panTo(r.point);
				var lng=document.getElementById('lng')
				lng.innerText=r.point.lng;
				var lat=document.getElementById('lat')
				lat.innerText=r.point.lat;
				mk.addEventListener("dragend",function(){
					var p = mk.getPosition()
					lng.innerText=p.lng;
					lat.innerText=p.lat;
				},false)
				mk.enableDragging()
			}
			else {
				alert('failed'+this.getStatus());
			}        
		},{enableHighAccuracy: true})
	  var geolocationControl = new BMap.GeolocationControl({
	  	anchor: BMAP_ANCHOR_BOTTOM_RIGHT
	  });
	  geolocationControl.addEventListener("locationSuccess", function(e){
	  });
	  geolocationControl.addEventListener("locationError",function(e){
	    // 定位失败事件
	    alert(e.message);
	  });
	  map.addControl(geolocationControl);
	  var imgtrue=document.getElementsByClassName('imgtrue');
	  var img=document.getElementsByClassName('img');
	  var mac =document.getElementsByClassName('mac');
	  var mactime = document.getElementsByClassName('mactime');
	  var temp = document.getElementsByClassName('temp');
	  var temptime = document.getElementsByClassName('temptime');
	  var progress = document.getElementById('progress');
	  var advId=document.getElementById('advId').value;
	  var macnone =document.getElementById('macnone')
	  var macshow =document.getElementById('macshow')
	  var tempnone =document.getElementById('tempnone')
	  var tempshow =document.getElementById('tempshow')
	  var imgshow =document.getElementById('imgshow')
	  var imgnone =document.getElementById('imgnone')
	  var imgtime =document.getElementsByClassName('imgtime')
	  var target = null;
	  var change=function(e){
		  for(var i = 0; i<imgtrue.length;i++){
			  if(window.event.target.id == 'img'+(i+1)){
				imgtrue[i].style.display = "block"
				  target = imgtrue[i].name
			  }else {
				imgtrue[i].style.display = "none"
			  }
		  }
	  }
	  var push =function(){
	  	$.ajax({
	  		type:"post",
	  		data:{'id':advId, 'oss_id':target},
	  		url:"/index/builder/set_img_info",
	  		async:true
	  	}).then(function(res){
			  if(res.success == true){
				  alert('设置成功')
			  }
		});
	  }
	  var savepos = function(){
		  $.ajax({
		  	type:"post",
	  		data:{'id':advId, 'longitude':lng.innerText, 'latitude':lat.innerText},
	  		url:"/index/builder/set_gps_info",
	  		async:true
		  }).then(function(res){
			  if(res.success){
				  alert('保存成功')
			  }
		  })
	  }
	  var reset = function (id) {
	  	document.getElementById('reseticon').className="animation"
		  $.ajax({
			  type: 'post',
			  data:{'type': 'all', 'id': id},
			  url: '/index/builder/Refresh',
			  async:true
		  }).then(function(res){
			  if(res.success){
				  for(var i=0;i<mac.length;i++){
				  	if(res.data.deviceList.length != 0){
				  		mac[i].innerText = res.data.deviceList[i].mac
				  		mactime[i].innerText = res.data.deviceList[i].add_time
				  	}else if(res.data.deviceList.length == 0 && i==0){
				  		macshow.style.display ="none"
				  		macnone.style.display ="block"
				  	}
				  	if(res.data.tempList.length != 0){
					  temp[i].innerText = res.data.tempList[i].temp+"℃"
					  temptime[i].innerText = res.data.tempList[i].add_time
				  	}else if(res.data.tempList.length == 0 && i==0){
				  		tempshow.style.display ="none"
				  		tempnone.style.display ="block"
				  	}
				  	if(res.data.ossList.length != 0){
				  		if(i<res.data.ossList.length){
				  		  img[i].src  = res.data.ossList[i].img_url
				  		  imgtime[i].innerText = res.data.ossList[i].add_time
				  		}
				  	}else if(res.data.ossList.length == 0 && i==0){
				  		imgshow.style.display ="none"
				  		imgnone.style.display ="block"
				  	}
				  }
			  document.getElementsByClassName("contentitem")[0].style.display="block"
			  document.getElementsByClassName("contentitem")[1].style.display="block"
			  setTimeout(function(){
			  	document.getElementById('reseticon').className=""
			  }, 500)
			  }
		  })
	  }
	  var getpicture = function (id) {
	  	if(timer !== undefined){
	  		clearInterval(timer)	
	  	}
	  	$.ajax({
	  		type:"post",
	  		data:{'id':id},
	  		url:"http://common.bomeiyi.net/index/Camera/snapshot",
	  		async:true
	  	}).then(function (res){
	  		if(res == 'ok'){
	  			var timer = setInterval(function(){
	  				$.ajax({
	  					type:"post",
	  					data:{'type': 'hex', 'id': id},
	  					url:"/index/builder/Refresh",
	  					async:true
		  			}).then(function(res){
		  				console.log(res)
		  				if(res.success){
		  					document.getElementsByTagName('progress')[0].value = res.data.hex
		  					document.getElementsByClassName("progressvalue")[0].innerText = res.data.hex
		  					if(res.data.hex == 0){
		  						$.ajax({
		  							type:"post",
		  							data:{'type': 'oss', 'id': id},
		  							url:'/index/builder/Refresh',
		  							async:true
		  						}).then(function (res) {
		  							if(res.success){
		  							document.getElementsByTagName('progress')[0].value = 0;
	  								for(var i=0;i<res.data.ossList.length;i++){
	  									img[i].src = res.data.ossList[i].img_url
	  								}
		  							}
		  						});
		  					}
		  				}
		  			});
	  			}, 2000)
	  		}
	  	});
	  }
	  var macreset = function(id){
//	  	document.getElementById('macreset').className="animation"
//	  		$.ajax({
//	  			type:"post",
//				data:{'type': id, 'id': id},
//				url:"/index/builder/Refresh",
//				async:true
//	  		}).then(function(res){
//	  			console.log(res)
//	  		})
console.log(123)
	  }
	</script>
</html>
